<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/conmmon.css">
 
    <script src="js/jquery.min.js"></script>
</head>
<style>
    .personal{
      height: 100%;
      width: 800px;
      margin-left: 0 auto;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 10px;
      padding: 30px;
      margin: 0 auto;
    }
  .one1{
    margin-top: 30px;
    font-weight: bolder;
    text-align: center;
  }
  .one{
    font-weight: bolder;
    width: 100%;
    display: inline-block;
    font-size: 20px;
  }
  .one1 input{
    margin-top: 10px;
  }
  button{
    margin-top: 20px;
    font-size: 30px;

  }



</style>




<body>

    <div class="personal" id="personal">
        <div class="one1">
            <span class="one" >您小学老师叫什么名字？问题1</span>  
            <input type="text" id="question1" >
        </div> 
        <div class="one1">
          <span class="one" >您父亲的生日？问题2</span>  
          <input type="text" id="question2" >
        </div> 
        <div class="one1">
          <span class="one">您母亲的生日？问题3</span>
          <input type="text" id="question3">  
        </div>   
        <div class="one1">
            <span class="one">在这里输入您的用户名：</span>
            <input type="text" id="question3">  
          </div> 
        <div class="one1">
            <span class="one">在这里输入您的新密码：</span>
            <input type="text" id="question3">  
          </div> 
        <div class="one1">
            <button onclick="sub()">修改</button>
        </div>   
        
    </div>


    <script>

    
        //从数据库中查询密保问题
        function showquestion(){
            //直接使用ajax从数据库中查找，然后放到对应组件上
            jQuery.ajax({
                url:"/personal/getsafequestion1",
                type:"POST",
                data:{},
                //返回来的是一个hashmap
                success:function(result){
                    if(result!=null && result.code==200&& result.data!=null){
                        var questionhtml = '';
                        for(var i=0;i<result.data.length;i++){
                            questionhtml += '<div class="one1">';
                            questionhtml += '<span class="one" >'+ result.data[i].question +'</span>  ';
                            questionhtml += '<input type="text" id="answer'+ i +'" value="">';
                            questionhtml += '</div>';
                        }
                        questionhtml += '<div class="one1">';
                        questionhtml += '<span class="one">在这里输入您的用户名：</span>';
                        questionhtml += '<input type="text" id="username">'
                        questionhtml += '</div> ';
                        questionhtml += '<div class="one1">';
                        questionhtml += '<span class="one">在这里输入您的新密码：</span>';
                        questionhtml += '<input type="text" id="pwd">'
                        questionhtml += '</div> ';
                        questionhtml += '<div class="one1">';
                        questionhtml += '<button onclick="sub()">修改</button>';
                        questionhtml += '</div> ';

                        jQuery("#personal").html(questionhtml);
                        
                    }else{
                        alert(result.msg);
                    }
                }

            });

        }
        showquestion();


        function sub(){
            //获取用户输入的信息
            var answer0 = jQuery("#answer0").val();
            var answer1 = jQuery("#answer1").val();
            var answer2 = jQuery("#answer2").val();
           
            //判断
            if(answer0=="" || answer1=="" || answer2=="" ){
                alert("请输入完整密保问题的答案");
                return;
            }
            if(username==""){
                alert("请输入用户名");
                username.focus();
                return;
            }
            if(pwd == ""){
                alert("请输入新密码");
                pwd.focus();
                return;
            }
            const list = [answer0,answer1,answer2];
            var username = jQuery("#username").val();
            var pwd = jQuery("#pwd").val();
            //还是写循环吧，list类型的数据不会传
            var flag = 1;
            var str = "";
            for(var i = 0;i< list.length;i++){
                // alert("当前回答框为answer"+i+",内容为:"+list[i]);
                
                //直接写死
                jQuery.ajax({
                    url:"/personal/forgetpwd",
                    type:"POST",
                    data:{"answer":list[i],"username":username,"pwd":pwd,"index":i},
                    success:function(result){
                        if(result!=null && result.code==200 && result.data!=null){
                            alert("修改密码成功，请重新登录");
                            location.href="/login.html";
                        }else{
                            flag =0;
                            if(result.code==-1){
                                str = result.msg;
                            }
                            return;
                        }
                    },
                    async:false
                });

            }
            if(flag==0 && str!=""){
                alert(str);
            }
            


         
           
    
            
        }
        




    </script>
 



</body>

</html>
